<template>
	<div class="bindBox" v-if="show">
        <div class="bind_container">
            <div class="title">亲，游客账号游戏记录可能丢失哦，先绑定手机号吧</div>
            <div class="game_close" @click="$store.commit('hide')">
                <span></span>
            </div>
            <div class="firstStep">
                <div class="input_box">
                    <div class="error_box">
                        <div class="error_message" ></div>
                        <div class="to_login" @click="proLogin()"></div>
                    </div>
                    <div>
                        <input type="text" class="phone" placeholder="手机号">
                    </div>
                    <div>
                        <input type="text"  class="code"  placeholder="验证码">
                        <span class="get_code" @click="getPhoneCode()">获取验证码</span>
                    </div>
                </div>
                <div class="next_box">
                    <div class="next_step" @click="toBind">马上绑定</div>
                </div>
            </div>
            <div class="third_step">
                <p style="font-size:0.16rem;margin-top:0.4rem;">哎呀，现在去登录的话，之前的游戏记录都没有办法保存了呢，确定要去登录吗π__π</p>
                <img src="../../static/img/icon_noInfo.png" alt="">
                <div class="clearFix">
                    <span  class="clickBtn" @click="cancelLogin()">取消</span>
                    <span class="clickBtn"  @click="toLogin()">登录</span>
                </div>
            </div>
            <div class="second_step">
                <p>恭喜您已绑定成功!您可以通过<span>手机号登录</span>畅游游戏啦!</p>
                <h3>资料详情:</h3>
                <ul>
                    <li class="clearFix"><p>账号状态</p><p>已绑定手机号</p></li>
                    <li class="clearFix"><p>账号</p><p>手机号(可使用手机号快速登录)</p></li>
                    <li class="clearFix"><p>密码</p><p>未设置<span></span></p></li>
                    <li class="clearFix"><p>游戏</p><p><span class="game" style="color: #000;cursor:default;">大明征途网页版</span><span onclick="saveGame()">【保存游戏】</span></p></li>
                </ul>
            </div>
            <div class="bind_footer">( ˘･з･)绑定手机号，以后进入游戏更方便哦～</div>
        </div>
    </div>
</template>
<style scoped lang="css">

.clickBtn{
    width: 0.95rem;
    height: 0.35rem;
    line-height: 0.35rem;
    font-size: 0.14rem;
}
.bindBox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0,0,0,0);
  
}
.bind_container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 4rem;
    height:3rem;
    background:rgba(243,243,243,1);
    border-radius:0.04rem;
    border:1px solid rgba(204,204,204,1);
}
.bind_container .bind_footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    text-align: center;
    border-top: 1px solid #d7d7d7;
    color: #333333;
    font-size:0.13rem;
}


.title{
    width: 100%;
    height:0.44rem;
    line-height:0.44rem;
    font-size: 0.13rem;
    color: #333333;
    text-align: center;
    background:linear-gradient(180deg,rgba(244,244,244,1),rgba(228,228,228,1));
    box-shadow:0px 1px 0px rgba(103,103,103,0.5);
    border-radius:0.04rem;
    border-bottom:1px solid rgba(204,204,204,1);
}
.game_close {
    position: absolute;
    right:0.1rem;
    top: 0.06rem;
    height:0.18rem;
    border-radius:0.04rem;
    padding-left: 0.04rem;
    padding-right:0.04rem;
    text-align: center;
    /*background: #dcdbdb;*/
    color: #ffffff;
    cursor: pointer;
}
.game_close span{
    float: left;
    display: inline-block;
    margin-top:0.08rem;
    width:0.15rem;
    height:0.15rem;
    background: url("../../static/img/icon_x.jpg") no-repeat center;
    background-size: contain;
}

/*输入内容盒子*/
.input_box {
    position: relative;
    padding-left: 0.7rem;
    padding-top: 0.35rem;
}
.phone {
    padding-left:0.1rem;
    width:2.66rem;
    height:0.4rem;
    border: 1px solid rgba(204,204,204,1);
    border-radius:4px;
    font-size: 0.14rem;
    background:rgba(243,243,243,1);
}
input::placeholder{
    color: #666666;
}
input:focus{
    background-color: #F9F9F9;
}
.code {
    margin-top:0.2rem;
    padding-left:0.1rem;
    width:1.6rem;
    height:0.4rem;
    border: 1px solid rgba(204,204,204,1);
    border-radius:4px;
    float: left;
    font-size: 0.14rem;
    background:rgba(243,243,243,1);
}
.get_code {
    display: inline-block;
    margin-top:0.2rem;
    margin-left:0.05rem;
    width:1rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    color: #ffffff;
    font-size: 0.14rem;
    cursor: pointer;
    background-image: url("../../static/img/icon_getCode.jpg");
    background-size: 100% 100%;
}
.get_code:hover{
    background-image: url("../../static/img/icon_getCode_hover.jpg");
    background-size: 100% 100%;
}
.error{
    border: 1px solid red !important;
}
.active {
    background-image: url("../../static/img/icon_getCode_active.jpg");
    background-size: 100% 100%;
    color: #000;
}
.error_box {
    position: relative;
}
.error_message {
    position: absolute;
    top: -0.2rem;
    left: 0;
    display: inline-block;
    font-size:0.14rem;
    color: #f00c0c;
}
.to_login {
    position: absolute;
    top:-0.2rem;
    display: inline-block;
    color: #5798ff;
    right:0.66rem;
    float: right;
    cursor: pointer;
    font-size: 0.14rem;
}
.next_box {
    padding-right:0.24rem;
}
.next_step{
    margin-top:0.14rem;
    margin-right: 0.4rem;
    width:2.66rem;
    height:0.4rem;
    line-height:0.4rem;
    text-align: center;
    color: #ffffff;
    float: right;
    font-size: 0.14rem;
    cursor: pointer;
    background-image: url("../../static/img/icon_bind.jpg");
    background-size: 100% 100%;
}
.next_step:hover{
    background-image: url("../../static/img/icon_bind_hover.jpg");
    background-size: 100% 100%;
}
.bind_active{
    background-image: url("../../static/img/icon_bind_active.jpg") !important;
}
.firstStep{
    display: block;
}
/*绑定成功提示*/
.second_step{
    display: none;
    color: #565556;
    padding-left:0.2rem;
    padding-right:0.2rem;
    font-size:0.14rem;
}
.second_step>p{
    padding-left: 0.2rem;
}
.second_step>p:first-child{
    margin-top: 0.2rem;
    margin-bottom:0.05rem;
    background: url("../../static/img/icon_bindOk.png") no-repeat 0 3px;
}
.second_step h3{
    font-size: 0.13rem;
    margin-bottom: 0.05rem;
    margin-top: 0.15rem;
    padding-left: 0.2rem;
}
.second_step ul{
    padding: 0.05rem 0.2rem 0 0.2rem;
}
.second_step ul li{
    border-left:2px solid #999999;
    border-top:2px solid #999999;
    border-right:2px solid #999999;
}
.second_step ul li:last-child{
    border-bottom:2px solid #999999;
}
.second_step ul li p{
    float: left;
    overflow: hidden;
    font-size: 0.12rem;
}
.second_step ul li p:first-child{
    width: 0.75rem;
    height: 0.24rem;
    line-height:0.24rem;
    text-align: center;
    border-right: 2px solid #999999;
}
.second_step ul li p:last-child{
    width: 2.35rem;
    height: 0.24rem;
    line-height: 0.24rem;
    text-align: center;
    font-size: 12px;
}
.second_step ul li p span{
    color: #D40A4F;
    cursor: pointer;
}
.second_step p>span{
    color: #D40A4F;
}
    /*登录提示框*/
.third_step{
    display: none;
    color: #f22a2a;
    padding: 0.15rem 0.4rem 0 0.4rem;
    font-size:0.14rem;
}
.third_step img{
    width:0.68rem;
    height:0.78rem;
    margin: 0.1rem 0 0 1.26rem;
}
.third_step p {
    text-align: center;
}
.third_step div span {
    float: left;
    width: 0.95rem;
    height: 0.35rem;
    line-height: 0.35rem;
    border-radius: 0.05rem;
    background-color: #d7d7d7;
    text-align: center;
    color: #ffffff;
    margin-left: 0.4rem;
    cursor: pointer;
}
.third_step div span:last-child{
    float: right;
    margin-right: 0.4rem;
    background-color: rgba(212,10,79,1);
}
	
</style>


<script>
import $store from "../components/vuex.js";
import axios from 'axios';

	export default {
		components:{

		},
		data(){
			return {
				isBind:null,
				isClick:true,
                token:"ZAgAAAAAAAGE9MTAxMjM4OTg1NzkmYj0yJmM9NCZkPTI0NTA4JmU9RDIxRjQ3MTJCMjgwNDUwNzY2MjlGQUVCNUYyNEZBQjMxJmg9MTUyODcwNzc2OTkyOCZpPTQzMjAwJm89MDAwMDAwMDAwMDAwMDAmcD0wJnE9MCZ1c2VybmFtZT0xODUxMDYxOTY4NSZpbD1jbrrb7E5MTGBwZZKl_9jUOvc",
			}
		},
		mounted(){


		},
        computed:{// 计算属性
            show:{
                get(){
                    return $store.state.bindShow               
                },
                set(){

                }

            }
        },
		methods:{

            // 确认登录
            toLogin() {
                var redirect_url = window.location.href;
                redirect_url = encodeURIComponent(redirect_url);
                window.location.href = 'https://lepay.vgs.lenovo.com.cn/#/login?redirect_url='+redirect_url;
            },

            cancelLogin() {
                $('.third_step').css('display', 'none');
                $('.firstStep').css('display', 'block');
            },
			closeBox(){
				$('.ifBox iframe').css('display', 'block');
			    $('.bindBox').css('display', 'none');
			    $('.phone').val('');
			    $('.code').val('');
			    $('.error_message').html('');
			    $('.to_login').html('');
			    $('.third_step').css('display', 'none');
			    $('.firstStep').css('display', 'block');
			    if (this.isBind){
			        return false;
			    }
                //13607668121
			    setTimeout(function () {
			        $('.bind_phone').click();
			    }, 1800000);
			},

		proLogin(){
			 $('.firstStep').css('display', 'none');
    		$('.third_step').css('display', 'block');
		},

		getPhoneCode(){ // 获取手机验证码
            // 验证手机是否绑定 
            
           let that =this;
		   var phoneNum = $('.phone').val();
           let url = "/back/bss/lid/isExist?accountId="+phoneNum;
		    if (!this.testPhoneNum(phoneNum)){
		        $('.error_message').html('请输入正确的手机号');
		        return false;
		    }else {
		        $('.error_message').html('');
		    }
		    var html = '';
		    if (!this.isClick) return false;

            axios.get(url).then(function(res){
                if(res.data.code==0){
                     html = '';
                    $('.error_message').html(html);
                    $('.to_login').html('');
                    that.getCode();
                }else{
                     html = res.data.msg;
                    $('.error_message').html(html);

                    if(res.data.code == 313){
                        $('.to_login').html('登录');
                    }else {
                        $('.to_login').html('');
                    }
                }                
            }).catch(function(data){
                
            })
            this.getCode();
		},
        // 发送短信验证码
         getCode() {
            let that = this;
            var phoneNum = $('.phone').val();
            let url = "/back/bss/lid/sendSms?phone="+phoneNum

            axios.get(url).then(function(res){

                console.log(res)
                that.$toast.center("发送成功")
                that.showLeftTime()

            })
        },
        // 获取验证码倒计时
         showLeftTime(){
            this.isClick = false;
            var leftTime = 60;
            var getHtml = $('.get_code');
            getHtml.addClass('active');
            var cdTimer = setInterval(function () {
                leftTime--;
                getHtml.html(leftTime + 's重新获取');
                if (leftTime < 1) {
                    getHtml.removeClass('active');
                    clearInterval(cdTimer);
                    this.isClick = true;
                    getHtml.html('获取验证码');
                }
            }, 1000);
        },

		testPhoneNum(phone){// 正则
		    var reg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
		    return phone.match(reg);
		},
/*        // 绑定手机号

         toBind() {

            var phoneNum = $('.phone').val();
            var mtel = phoneNum.substr(0, 3) + '****' + phoneNum.substr(7);
            var lenovoId = window.sessionStorage.getItem("lenovoId");
            var code = $('.code').val();
            var that = this;

            if (!this.testPhoneNum(phoneNum)){
                $('.error_message').html('请输入正确的手机号');
                return false;
            }else {
                $('.error_message').html('');
            }
            if (code == ''){
                $('.error_message').html('请输入验证码');
                return false;
            }else {
                $('.error_message').html('');
            }

            let url = "/back/bss/lid/touristsRegister?accountId="+phoneNum+"&code="+code+"&lenovoId="+lenovoId;
            axios.get(url).then(function(res){ // 绑定成功 返回最新的lenovoId和token 然后刷新页面 更新状态

                console.log(res)

                if(res.data.code==0){
                    that.$toast.center("绑定成功")
                    $store.commit('hide') // 更新状态

                        that.token = res.data.st;

                    // 更新储存的状态
                    window.sessionStorage.setItem("bind","bind"); //绑定完成，设置标识 
                    // 更新状态  更新完成以后 再次进入页面,用储存的token 去请求 新的 lenovoId和nickName

                    that.updateData(res.data.st)
                    window.location.reload()

                }else{
                    that.$toast.center(res.data.msg)
                }

                that.isBind = true;
                

            })
        },*/
                // 绑定手机号

         toBind() { // 测试
               var data = {
                    code:0,
                    lenovoId:"10123898579",
                    msg:"成功",
                    st:"ZAgAAAAAAAGE9MTAxMjM4OTg1NzkmYj0yJmM9NCZkPTI0NTA4JmU9RDIxRjQ3MTJCMjgwNDUwNzY2MjlGQUVCNUYyNEZBQjMxJmg9MTUyODcwNzc2OTkyOCZpPTQzMjAwJm89MDAwMDAwMDAwMDAwMDAmcD0wJnE9MCZ1c2VybmFtZT0xODUxMDYxOTY4NSZpbD1jbrrb7E5MTGBwZZKl_9jUOvc",
                    stExpTime:1528409855426,
                    stTtl:43200,
                    tgt:"",
                    tgtExpTime:0,
                }


          /*  let url = "/back/bss/lid/touristsRegister?accountId="+phoneNum+"&code="+code+"&lenovoId="+lenovoId;
            axios.get(url).then(function(res){ // 绑定成功 返回最新的lenovoId和token 然后刷新页面 更新状态

                console.log(res)

                if(res.data.code==0){
                    that.$toast.center("绑定成功")
                    $store.commit('hide') // 更新状态

                        that.token = res.data.st;
                    // 更新储存的状态
                    window.sessionStorage.setItem("bind","bind"); //绑定完成，设置标识 
                    // 更新状态  更新完成以后 再次进入页面,用储存的token 去请求 新的 lenovoId和nickName
                    that.updateData(res.data.st)
                    window.location.reload()

                }else{
                    that.$toast.center(res.data.msg)
                }

                that.isBind = true;
                

            })*/

            this.updateData(data.st)
        },

        updateData(token){// 绑定手机号后获取token 把token 发到给后端储存模拟绑定成功
            let url = "/token/user/getTourInfo?token="+token;
            let that = this ;
            console.log(token)

            axios.get(url).then(function(res){ // 
                console.log(res)
                that.token = res.data.token;
                that.nickname = res.data.nickname;
                that.userId = res.data.lenovoId;
                // 绑定成功永久储存token,绑定成功再次刷新页面也就不再是游客模式， 然后再次进入页面就用这个token 去请求喵喵的接口，返回正式的账户内容
                window.localStorage.setItem("bindToken",token)

                // 更新缓存状态
                $store.commit("setToken",that.token)
                $store.commit("setLenovoId",that.userId)
                $store.commit("setUserName",that.nickname)


                window.sessionStorage.setItem("bind","bind"); //绑定完成，设置标识 
                window.location.reload()

                })
        },

        


	}

}

</script>